<template>
	<div class="login-wrap" :style="backgroundDiv">
		<div class="ms-login">
			<div class="ms-title">谁是卧底小程序</div>
				<van-form @submit="onSubmit" class="ms-content">
					<van-field v-model="params.telphone"
								label="手机号"
								placeholder="请输入您的手机号"
								:rules="[{ validator: validatePhone , required: true , message:'请输入正确的电话号码'}]"/>
					<van-field v-model="params.password"
								type="password"
								label="密码"
								placeholder="请输入您的密码"
								:rules="[{ validator: isPassword , required: true , message:'请输入您的游戏密码（6-18位）'}]"/>
					<div style="margin: 16px;" class="login-btn">
						<van-button round block type="info" native-type="submit">提交</van-button>
					</div>
				</van-form>
				<div class="login-tips">
					<van-row type="flex" justify="space-around">
						<van-col span="6" @click="navTo('/user_register')">注册账号</van-col>
						<van-col span="6" @click="ForgetDoing=true">忘记密码</van-col>
					</van-row>
				</div>
				
				
				<van-dialog v-model="ForgetDoing" title="请联系管理员" theme="round-button">
					<!-- <van-cell icon="friends-o" title="官方群:" value="480618240" clickable=true></van-cell>
					<van-cell icon="envelop-o" title="发送邮件:" value="ausheng@foxmail.com"></van-cell> -->
					<van-cell-group>
						<van-cell icon="friends-o" 
								  title="官方群" 
								  label="480618240" 
								  :clickable="true"
								  v-clipboard:copy="copy_friends"
								  v-clipboard:success="onCopySuccess"
								  v-clipboard:error="onCopyError" />
						<van-cell icon="envelop-o" 
								  title="发送邮件" 
								  label="ausheng@foxmail.com" 
								  :clickable="true" 
								  v-clipboard:copy="copy_email"
								  v-clipboard:success="onCopySuccess"
								  v-clipboard:error="onCopyError" />
					</van-cell-group>
				</van-dialog>
			</div>
		</div>
	</div>
</template>

<script>
import VueClipboard from 'vue-clipboard2';
import Vue from 'vue';
Vue.use(VueClipboard);

export default {
	data() {
    return {
			backgroundDiv: {
				backgroundImage:'url(' + require('../../../public/images/background.jpg') + ')',
				height:'100vh',
				backgroundRepeat:'no-repeat',
				backgroundSize:'100% 100%'
			},
			ForgetDoing:false,
			copy_friends:"480618240",
			copy_email:"ausheng@foxmail.com",
			params:{
				telphone: '17611325509',
				password: 'jiannei0507',
			},
		};
	},
	mounted(){
		//开始背景图片自适应
		this.setImgSize();
		//屏幕尺寸改变的监听方法
		window.onresize = () => { this.setImgSize(); }
	},
	methods: {
		setImgSize(){
			let height = document.body.clientHeight+"px"; //获取可见区域的高
			let width = document.body.clientWidth+"px";//获取可见区域的宽
			this.$set(this.backgroundDiv,'backgroundSize',width+""+height);
		},
		isPassword(val){
			return /[_a-zA-Z0-9]{6,18}/.test(val);
		},
		validatePhone(val){
			return /[1][3,4,5,7,8][0-9]{9}/.test(val);
		},
		onSubmit() {
			let loading = this.$toast.loading({ duration: 0, forbidClick: true, message: '正在验证...' });
			this.$post('/game/player/login', this.params).then(res => {
				loading.clear();
				
				if (res.code == 200) {
					this.$notify({ type: 'success', message: '登录成功，欢迎回来' });

					this.$setCookie('user_token', res.data._token);
					this.$delete(res.data,'_token');
					this.$setCookie('user_info', JSON.stringify(res.data));
					
					this.$router.push('/game_hall');
				} else {
					this.$toast({ message: res.msg, position: 'bottom',duration: 2000 });
				}
			}).catch((e) => {
				loading.clear();
				console.log(e);
				this.$notify({ type: 'danger', message: '连接服务器失败' });
			});
		},
		onCopySuccess: function (e) {
			this.$toast({ message: '已为您复制到粘贴板', position: 'bottom' });
			console.log('copy success : ', e);
		},
		onCopyError: function (e) {
			this.$toast({ message: '复制到粘贴板时出错', position: 'bottom' });
			console.log('copy error : ', e);
		},
		navTo(path) {
			this.$router.push(path);
		},
	}
};
</script>
<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: black;
    border-bottom: 1px solid #ddd;
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}
.login-btn {
    text-align: center;
}
.login-tips {
    line-height: 30px;
}
</style>